Gran menú con imágenes de fondo

Hace tiempo Pizcos blog en su sección de enlaces del mes mostraba un menú muy especial, es un menú elegante y yo diría que majestuoso.

Lo encontré de nuevo en Codrops donde explican su funcionamiento y proporcionan la descarga de archivos, se visualiza perfectamente en Google Chrome, Firefox, Opera, Safari, IE8, IE7 incluso en IE6. Trabaja con un Pugin de jQuery y el menú original y que vamos a añadir podemos verlo en CODROPS.

Descargamos el ZIP con las imágenes para añadirlas posteriormente a los estilos.
Nos situamos en plantilla edición de html justo después de ]]></b:skin> y los añadimos:

<style type='text/css'>
* {margin:0;padding:0;}
.menuWrapper{
border:1px solid #000;
text-shadow:0 1px 1px #000;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent; }

ul.menu{
padding: 0;
list-style:none;
width:797px; }
ul.menu > li{
float:left;
width:265px;
height:542px;
background-repeat:no-repeat;
background-color:transparent; }
ul.menu > li.last{
border:none; }

.bg1{
background-image: url(Url-imagen); }
.bg2{
background-image: url(Url-imagen); }
.bg3{
background-image: url(Url-imagen); }

ul.menu > li > a{
text-shadow:0 1px 1px #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
float:left;
font-size: 21px;
width:268px;
height: 48px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
font-family: 'Tangerine', century gothic, verdana;
text-decoration:none;
}

ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:130%;
height:110px;
padding-top:10px;
background-repeat:no-repeat;
background-color:transparent; }
ul.menu > li ul li{
text-shadow:0 1px 1px #000;
display:none; }
ul.menu > li ul.sub1{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub2{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub3{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub1 {margin-left:0;}
ul.menu > li ul.sub2 {margin-left:0;}
ul.menu > li ul.sub3 {margin-left:0;}
ul.menu > li ul li a{

color:#fff;
text-decoration:none;
line-height:20px;
margin-left:20px;
text-shadow:0 1px 1px #000;
font-size:15px; }

ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff; }

ul.menu > li ul.sub1 li{
display:block; }
</style>

Si decidimos sustituir las imágenes debemos tener en cuenta que miden 800x542 y las añadimos en "url-primera-fotografía" segunda y tercera.

Las otras imágenes que debemos añadir son las transparencias de color y en los estilos viene definidas con url-imagen-transparente-azul, verde y amarilla.

A continuación añadimos los scripts directamente a la plantilla para evitar los problemas ocasionados con alojamientos externos.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Si con anterioridad añadimos jquery.min.js no es necesario volver a añadirlo. A continuación añadimos también el contenido del siguiente archivo

Por último editamos un gadget de HTML y en su interior añadimos lo siguiente:

<div class="menuwrapper bg1" id="menuwrapper">
<ul class="menu" id="menu">
<li class="bg1" style="background-position: 0pt 0pt;">
<a href="#" id="bg1">Título-1</a>


<ul class="sub1" style="background-position: 0pt 0pt;">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
</ul>
</li>
<li class="bg1" style="background-position: -266px 0px;">
<a href="#" id="bg2">Título-2</a>


<ul class="sub2" style="background-position: -266px 0pt;">
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li class="last bg1" style="background-position: -532px 0px;">
<a href="#" id="bg3">Título-3</a>


<ul class="sub3" style="background-position: -266px 0pt;">
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</div>

En el gadget es donde añadiremos a url de las páginas o sitios que vamos a enlazar,debemos sustituir la almohadilla # por la url de nuestro enlace.

En Título-1, Título-2 y Título-3 lo sustituimos por el texto de los títulos que deseamos añadir y que se mostrará en la barra inferior del menú.

Cada título lleva a continuación Submenu 1, Submenu 2, Submenu 3. Esos submenús son los enlaces que añadimos para que se muestren marcando sobre los títulos.

Click en la imagen para ver ejemplo personalizado